<!-- 多级菜单 -->
<template>
    <fragment class="menu_tree">
        <fragment v-for="menu in menuList" :key="menu.index">
            <!-- 有子菜单 start -->
            <el-submenu v-if="menu.children && menu.children.length > 0" :index="menu.path">
                <template slot="title">
                    <i :class="menu.icon"></i>
                    <span>{{ menu.title }}</span>
                </template>
                <menu-tree :menuList="menu.children"></menu-tree>
            </el-submenu>
            <!-- 有子菜单 end -->
            <!-- 无子菜单 start -->
            <el-menu-item v-else :index="menu.path">
                <i :class="menu.icon"></i>
                <span slot="title">{{ menu.title }}</span>
            </el-menu-item>
            <!-- 无子菜单 end -->
        </fragment>
    </fragment>
</template>
<script>
export default {
    name: 'MenuTree', //组件自己引入自己，只需要定义name，就相当于注册了当前组件
    props: ["menuList","collapse"],
    data() {
        return {
          
        }
    },
    mounted(){
        
    }
}
</script>
<style lang="scss" scoped>
:deep .el-submenu__title {
    color: $font_color;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    i {
        color: $font_color;
    }
}

.el-menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    i {
        color: $font_color;
    }
}
</style>